<template>
  <div ref="tableWarp" class="tableWarp">
    <!-- 操作按钮区域 -->
    <slot name="extra_" slot="extra"></slot>
    <div class="table-operator">
      <a-row type="flex" :gutter="24" justify="space-between">
        <a-col :xl="12" :lg="12" :md="12" :sm="12">
          <div style="text-align: center;
            font-size: 24px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 32px;">{{totalArea}}亩</div>
          <div style="text-align: center">总园区面积</div>
          <!-- <a-button type="primary" icon="download" >导出</a-button>
          <h5 style="display:inline-block;">{{cggraphreportData.head.annotation}}</h5> -->
        </a-col>
        <a-col :xl="12" :lg="12" :md="12" :sm="12" style="text-align: end">
          <!-- <a-switch checked-children="分页" un-checked-children="分页" v-model="ipagination"/> -->
          <div
            style="text-align: center;
            font-size: 24px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 32px;"
          >
            {{totalTree}}株
          </div>
          <div style="text-align: center">总种植株树</div>
        </a-col>
      </a-row>
    </div>
    <a-table
      size="middle"
      bordered
      :rowKey="(record, index) => index"
      :columns="columns"
      :pagination="ipagination"
      :data-source="getTableAddTotalRow"
      :scroll="{ x: getTableScroll ,y: 200}"
      @change="handleTableChange"
    >
      <template v-for="(key, i) in Object.keys(customRender)" :slot="key" slot-scope="text, record, index">
        <div
          class="custom-render"
          :key="i"
          @click="addComment(text, record, index, $event)"
          v-html="customRender[key](text, record)"
        ></div>
      </template>
    </a-table>
  </div>
</template>
<script>
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import {getAction } from '@/api/manage'
export default {
  name: 'GraphreportAutoTable',
  computed: {
  //   getTableAddTotalRow() {
  //     // 根据配置获取表格数据
  //     let tableDataSource_
  //     if (this.cggraphreportData.head.dataType === 'json') {
  //       tableDataSource_ = JSON.parse(JSON.stringify(this.chartData))
  //     } else if (this.cggraphreportData.head.dataType === 'sql' || this.cggraphreportData.head.dataType === 'bean') {
  //       tableDataSource_ = JSON.parse(JSON.stringify(this.cggraphreportData.data.data))
  //     }
  //     if (!this.isTotal) {
  //       return tableDataSource_
  //     }
  //     const numKey = 'rowIndex'
  //     const totalRow = { [numKey]: '合计' }
  //     this.columns.forEach((column) => {
  //       const { key, dataIndex } = column
  //       if (![key, dataIndex].includes(numKey)) {
  //         let total = 0
  //         tableDataSource_.forEach((data) => {
  //           total += /^\d+\.?\d?$/.test(data[dataIndex]) ? Number.parseFloat(data[dataIndex]) : Number.NaN
  //         })
  //         if (Number.isNaN(total) || !column.isTotal) {
  //           total = '-'
  //         }
  //         totalRow[dataIndex] = total
  //       }
  //     })
  //     tableDataSource_.push(totalRow)
  //     return tableDataSource_
  //   },
  //   getTableScroll() {
  //     const width = this.columns.length * 100 - 40
  //     // 解决表格列分配宽度小于表格宽度时 多一列bug
  //     if (width < this.tableWarpWidth) {
  //       this.columns.forEach(function (item) {
  //         if (item.dataIndex !== 'rowIndex') {
  //           delete item.width
  //         }
  //       })
  //     }
  //     return width > this.tableWarpWidth ? width : false
  //   },
  },
  data() {
    return {
      columns: [
        {
            title: '编号',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'果园名称',
            align:"center",
            dataIndex: 'name',
          },
           {
            title:'面积（亩）',
            align:"center",
            dataIndex: 'area'
          }], // 需要渲染的表头
      totalArea:'',
      totalTree:'',
      ipagination:{
        current: 1,
        pageSize: 5,
        showQuickJumper: false,
        showSizeChanger: false,
        total: 0,
        position:'bottom'
      },
      getTableAddTotalRow:[],
      rowIndexColumns: {
        // 序号列头
        title: '编号',
        dataIndex: 'rowIndex',
        width: 60,
        align: 'center',
        fixed: 'left',
        customRender: function (text, r, index) {
          return parseInt(index) + 1
        },
      },
      rowIndexTotalColumns: {
        // 序号列头
        title: 'bianhao',
        dataIndex: 'rowIndex',
        width: 60,
        align: 'center',
        fixed: 'left',
        customRender: function (text, r, index) {
          return text !== '合计' ? parseInt(index) + 1 : text
        },
      },
      customRender: {},
      spinning: true,
      tableWarpWidth: 0, // 判断table是否超宽
      isTotal: false, // 判断是否合计
    }
  },
  props: ['items', 'cggraphreportData', 'chartData'],
  watch: {
    items: {
      handler(val, oldVal) {
        this.getColunms()
      },
      deep: true, // true 深度监听
    },
  },
  mounted() {
   this.getdata(this.ipagination)
    this.$nextTick(() => {
      if (this.$refs.tableWarp) {
        this.tableWarpWidth = this.$refs.tableWarp.offsetWidth
      }
      this.getColunms()
    })
  },
  methods: {
    handleTableChange(pagination) {
      console.log(pagination);
      this.ipagination = pagination
      this.getdata(pagination)
    },
  
    getdata(pagination){
      console.log(pagination);
        getAction('/loquat/txppOrchard/info',{pageNo : pagination.current,
          pageSize :pagination.pageSize}).then((res)=>{
           this.totalArea=res.result.totalArea
           this.totalTree=res.result.totalTree
           this.getTableAddTotalRow=res.result.orchards.records
           this.ipagination.total = res.result.orchards.total
     });
    },
    getColunms() {
      // 根据弹窗的数据获取表格的表头
      const that = this
      that.columns = [this.rowIndexColumns]
      const items = JSON.parse(JSON.stringify(this.items))
      items.sort(function (a, b) {
        return a.orderNum - b.orderNum
      })
      items.forEach((item, i) => {
        if (item.isShow) {
          const column = {
            title: item.fieldTxt,
            align: 'center',
            dataIndex: item.fieldName,
            isTotal: item.isTotal,
            width: item.fieldWidth || 100,
          }
          if (item.dictCode) {
            column.customRender = function (t, r, i) {
              return filterDictTextByCache(item.dictCode, t)
            }
          }
          if (item.jsEnhance) {
            column.scopedSlots = { customRender: column.dataIndex }
            var obj = eval('(' + item.jsEnhance + ')')
            that.customRender[column.dataIndex] = obj.customRender
          }
          that.columns.push(column)
        }
        if (item.isTotal) {
          this.isTotal = true
        }
      })
      if (this.isTotal) {
        that.columns.splice(0, 1, this.rowIndexTotalColumns)
      }
      if (that.getTableScroll) {
        this.rowIndexColumns.fixed = 'left'
      } else {
        this.rowIndexColumns.fixed = false
      }
    },
    addComment(text, record, index, $event) {
      // 处理js增强添加的方法  目前只支持click
      var domClick = $event.target.getAttribute('@click')
      if (domClick) {
        domClick = eval('(' + domClick + ')')
        domClick.call(this, text, record, index)
      }
    },
  },
}
</script>
<style scoped lang="less">
/deep/.ant-table {
  height: 240px;
  td {
  white-space: nowrap;
}
} 
</style>
<style>
.custom-render > * {
  display: inline-block;
  min-width: 20px;
  height: 100%;
  border-radius: 5px;
}
.custom-render {
  display: inline-block;
}
</style>
